<template>
  <div class="mobile clearfix">
    <MobileHeader/>
    <div class="article-list-mobile">
      <div class="bread clearfix">
        <span>您现在的位置：</span>
        <label v-for="(list1, index) in date1.channelList" :key="index" >{{ list1.channelName }} 列表
        </label>
      </div>
      <ul class="list clearfix" v-if="date1.displayForm=='1'">
        <li v-for="(item, index) in date1.ipage.records" :key="index" @click="jump(item.id)" >
            <h3 title="" class="text-wid">
              <a target="_blank">{{item.title}}</a>
            </h3>
            <p class="p" style="word-wrap: break-word;">
              {{item.description}}</p>
            <p class="date">{{item.releaseDate }}</p>
        </li>
      </ul>

      <div class="page-list clearfix">
        <a @click="pagination($event, date1.ipage.current-1)" >上页</a>
        &nbsp;&nbsp;&nbsp;
       <!-- <template v-for="count in date1.ipage.pages">
          <a @click="pagination($event, count)" :class="count == date1.ipage.current ? 'focus' : ''" :key="count" v-if="count<=date1.ipage.current+5 && count>date1.ipage.current-5" >{{ count }}</a>
        </template>-->
        <a @click="pagination($event, date1.ipage.current+1)" >下页</a>
        共{{date1.ipage.pages}}页 <!--跳转至<input style="width: 22px" v-model="pages" @keyup.enter="goPage()">页<a @click="goPage()">go</a>-->
      </div>
    </div>
   
    <MobileFooter/>
  </div>
</template>

<script>

  import MobileHeader from './MobileHeader.vue'
  import MobileFooter from "./MobileFooter";
  import _http from "../httpService";

  export default {
    name: "HospitalSummedup",
    components: {
      MobileHeader,
      MobileFooter
    },
    data(){
      return {
        pageNo: 1,
        pages:1,
        pageSize: 10,
        date1: {
          ipage: {},
          channelName: "",
          channelNameEn: "",
          channelContent: "",
        },
        dataList: [],
        isDisable: false,
        name: "",
        mobile: "",
        content: "",
      };
    },
    methods:{
      filters: {
        ellipsis (value) {
          if (!value) return ''
          if (value.length > 20) {
            return value.slice(0,20) + '...'
          }
          return value
        }
      },
      jump: function(id) {
        this.$router.push({ path: "/MobileArticle/" + id });
      },
      pagination: function(e, pageNo) {
        this.pageNo = pageNo
        _http.get("/content/jcContent/listArticle?channelCode=" +this.$route.query.channelCode +"&pageNo=" +pageNo +
                        "&pageSize=" +this.pageSize
                )
                .then((resp) => {
                  if (resp.data.success) {
                    this.date1 = resp.data.result;
                  }
                })
                .catch((error) => console.log(error))
                .finally(() => (this.loading = false));
      },
    },
    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      $route() {
        _http .get( "/content/jcContent/listArticle?channelCode=" +
                        this.$route.query.channelCode +
                        "&pageNo=" +
                        this.pageNo +
                        "&pageSize=" +
                        this.pageSize
                )
                .then((resp) => {
                  if (resp.data.success) {
                    this.date1 = resp.data.result;
                  }
                })
                .catch((error) => console.log(error))
                .finally(() => (this.loading = false));
      },
      immediate: true,
    },
    created() {
      _http .get( "/content/jcContent/listArticle?channelCode=" +
                      this.$route.query.channelCode +
                      "&pageNo=" +
                      this.pageNo +
                      "&pageSize=" +
                      this.pageSize
              )
              .then((resp) => {
                if (resp.data.success) {
                  this.date1 = resp.data.result;
                }
              })
              .catch((error) => console.log(error))
              .finally(() => (this.loading = false));
    }
  }
</script>

<style scoped>

</style>
